<template>
	<view>
		<u-navbar back-text="返回" title="农产品行情"></u-navbar>
		<view style="background-color: #FFFFFF;">
			<u-image :src="$unishow + 'images/hangqing_top.jpg'" width="100%" mode="widthFix"></u-image>
		</view>
		<view style="background-color: #FFFFFF;">
			<view>
				<u-field v-model="area" label="地区" placeholder="请选择地区" :border-top="false" input-align="right" @click="areaShow=true">
				</u-field>
			</view>
			<view>
				<u-field v-model="cate" label="品种" placeholder="请选择品种" :border-bottom="false" input-align="right" @click="cateShow=true">
				</u-field>
			</view>
		</view>
		<view style="display: flex;flex-wrap:wrap;padding: 20rpx;">
			<view v-for="(item,index) in cateSubList" :key="index" style="width: 33.33%; padding: 15rpx;" @click="onView(item.label)">
				<view style="background-color: #FFFFFF; text-align: center; line-height: 60rpx;border-radius: 30rpx;">{{item.label}}</view>
			</view>
		</view>

		<u-picker mode="region" v-model="areaShow" :default-region="defaultRegion" @confirm="onConfirmPickerArea">
		</u-picker>
		<u-select v-model="cateShow" mode="mutil-column-auto" :list="cateList" :default-value="defaultCate" @confirm="onConfirmSelectCate">
		</u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					area: '',
					cate: '',
				},
				defaultRegion: [],
				defaultCate: [],
				area: '',
				cate: '',
				areaShow: false,
				cateShow: false,
				cateList: [],
				cateSubList:[],
				list:[],
			}
		},
		onLoad() {
			var that = this;
			uni.request({
				url: this.$unishow + 'api/hangqing/index',
				method: 'GET',
				data: {},
				success: res => {
					that.cateList = res.data.cate;
					for(let i in that.cateList){
						that.cateList[i].extra = i;
						for(let k in that.cateList[i].children){
							that.cateList[i].children[k].extra = k;
						}
					}
					
					console.log(that.cateList);
					
					//微信jssdk
					if (that.$wechat && that.$wechat.isWechat()) {
						that.$wechat.share({
							title: '行情大厅',
							desc: "",
							img: that.$unishow + 'images/hangqing_top.jpg',
						}, window.location.href, {});
					}
					
				},
				fail: () => {},
				complete: () => {}
			});
		},
		methods: {
			loadList(e){
				this.form.cate = e;
				uni.request({
					url: this.$unishow + 'api/hangqing/search',
					method: 'GET',
					data: this.form,
					success: res => {
						if(res.data.code == 0){
							uni.showToast({
							    title: res.data.msg,
								icon:'none',
							    position: 'bottom'
							});
						}else{
							that.list = res.data;
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			onView(e){
				if(!this.form.area){
					uni.showToast({
					    title: '请选择地区',
						icon:'none',
					    position: 'bottom'
					});
					return;
				}
				uni.navigateTo({
					url: '/pages/hangqing/list?area=' + this.form.area + '&cate=' + e,
				});
			},
			onConfirmSelectCate(e) {
				console.log(e);
				var that = this;
				this.cate = e[0].label;
				this.defaultCate = [this.cateList.findIndex(item => item.value === e[0].value)] || [0];
				uni.request({
					url: this.$unishow + 'api/hangqing/cate_sub',
					method: 'GET',
					data: {id:e[0].value},
					success: res => {
						that.cateSubList = res.data;
					},
					fail: () => {},
					complete: () => {}
				});
			},
			onConfirmPickerArea(value) {
				console.log(value);
				this.form.area = value.area.label;
				this.defaultRegion = [value.province.label, value.city.label, value.area.label];
				this.area = value.province.label + '-' + value.city.label + '-' + value.area.label;
			}
		}
	}
</script>

<style>
	page{
		background-color: #f3f4f6;
	}
</style>
